<template>
  <div class="art-full-height">
    <BasicCard class="art-table-card">
      <BasicVxeTable v-bind="gridOptions">
        <template #tools_left>
          <el-date-picker v-model="month" type="month" value-format="YYMM" />
          <el-button type="primary" @click="getList">查询</el-button>
        </template>
      </BasicVxeTable>
    </BasicCard>
  </div>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import { splitTsIdToTime } from '@/utils'
  import { postBanCiAndZongHeBaoBiao } from '@/api/shuJuBaoBiao'

  const { t } = useI18n()
  const month = ref(dayjs().format('YYMM'))

  const columns: BasicGridColumnProps[] = [
    {
      title: '日期',
      field: 'tsidy',
      width: 120
    },
    {
      title: '工序',
      field: 'craftNodeName',
      width: 120
    },
    {
      title: '品种',
      field: 'materialName',
      minWidth: 120
    },
    {
      title: '产量(m)',
      field: 'yarnLength',
      minWidth: 120
    },
    {
      title: '产量(kg)',
      field: 'actualYarnWeight',
      minWidth: 120
    }
  ]
  const gridOptions = reactive<BasicGridProps>({
    virtualXConfig: {
      enabled: false
    },
    virtualYConfig: {
      enabled: false
    },
    spanMethod({ row, rowIndex, column, visibleData }) {
      const spanFields = ['tsidy', 'craftNodeName']
      const cellValue = row[column.field]
      if (cellValue && spanFields.includes(column.field)) {
        const prevRow = visibleData[rowIndex - 1]
        let nextRow = visibleData[rowIndex + 1]
        if (prevRow && prevRow[column.field] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.field] === cellValue) {
            nextRow = visibleData[++countRowspan + rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    },
    cellClassName({ column }) {
      if (column.field === 'tsidy' || column.field === 'craftNodeName') {
        return 'no-stripe'
      }
      return null
    },
    extraConfig: {
      title: t('custom.综合报表')
      //   isCustom: false,
      //   isExport: false,
      //   isFilterAndSort: false
    }, // 拓展的配置
    id: `shujubaobiao-zonghebaobiao`, // id用于缓存,务必配置
    height: 'auto',
    loading: true,
    columns,
    toolbarConfig: {} // 工具栏
  })

  const getList = () => {
    postBanCiAndZongHeBaoBiao({
      yearMonth: month.value
    })
      .then((res: any) => {
        gridOptions.loading = false
        gridOptions.data = res.map((value) => {
          return {
            tsid: value.tsid,
            tsidy: splitTsIdToTime(value.tsid),
            actualYarnWeight:
              value.actualYarnWeight == null
                ? null
                : Math.round(value.actualYarnWeight * 100) / 100,
            craftNodeName: value.craftNodeName,
            materialName: value.materialName,
            yarnLength: value.yarnLength == null ? null : Math.round(value.yarnLength * 100) / 100
          }
        })
      })
      .catch(() => {
        gridOptions.loading = false
      })
  }

  onMounted(() => {
    getList()
  })
</script>
